import React, { useState } from 'react';
import { Typography } from 'antd';
import { Input, Select, AutoComplete } from 'antd';
import WEditor from '../widgets/WEditor';
import useAppContext from '../hooks/useAppContext';
import { SELECT_NODE, UNSELECT_NODE } from '../actions/DESGIN'

import PropertyEditor from '../components/PropertyEditor';
import _ from 'lodash';


const { Title, Text } = Typography;
const { Option } = Select;


const DRadioGroup = (props) => {

    const { root, parent, node, pindex, onSchemaChange } = props;
    const { rootState, dispatch } = useAppContext();
    const [mouseOver, setMouseOver] = useState(false);
    const [editProps, setEditProps] = useState(false);

    //样式
    const style = {
        //width: '100%',

        borderWidth: '1px',
        borderStyle: 'dotted',
        borderColor: (((rootState.selectedCode == node.code) || mouseOver) ? 'green' : '#1890ff'),
        // margin: '5px',
        // padding: '5px'
    };


    const { title = "", rules = {},type="text", hiddeLabel = false, prefix = "", suffix = "" } = node.attrs;
    const { required } = rules;
    const height = "30px";

    const labelWidth = hiddeLabel ? 0 : 33;
    const requiredWidth = required ? 5 : 0;

    const txtWidth = (100 - labelWidth - requiredWidth);


    let prefixAndSuffix = {};
    if (prefix.trim() !== "") {
        prefixAndSuffix["prefix"] = prefix;
    }
    if (suffix.trim() !== "") {
        prefixAndSuffix["suffix"] = suffix;
    }


    //console.log(required,'required');

    return <>  {editProps ? <PropertyEditor
        attrList={[{
            name: 'title',
            path: 'title',
            label: '名称',
            type: 'string'
        },{
            name: 'prefix',
            path: 'prefix',
            label: "前缀",
            type: 'string'
        }, {
            name: 'suffix',
            path: 'suffix',
            label: "后缀",
            type: 'string'

        }, {
            name: 'hiddeLabel',
            path: 'hiddeLabel',
            label: '隐藏label',
            type: 'boolean'
        }, {
            name: 'type',
            path: 'type',
            label: 'type',
            type: 'select',
            opts: [{
                text: 'text',
                value: 'text'
            }, {
                text: 'number',
                value: 'number'
            }, {
                text: 'email',
                value: 'email'
            }]
        }, {
            name: 'required',
            path: 'rules.required',
            label: '必填',
            type: 'boolean'
        }]}
        node={node}
        onChange={(newNode) => {
            //root
            onSchemaChange({ sourceType: 'row' }, _.cloneDeep(root));
        }}
        onClose={() => {
            setEditProps(false);
        }} /> : <></>}
        <WEditor code={node.code}
            onPropsEditClick={() => {
                //取消选择该节点
                dispatch({
                    type: UNSELECT_NODE
                });
                //alert('编辑按钮');
                setEditProps(true);
            }}
            onPropsDeleteClick={() => {
                //删除已选中的元素
                parent.children = parent.children.filter(m => {
                    return m.code != node.code;
                });
                onSchemaChange({ sourceType: 'root' }, _.cloneDeep(root));
            }}>
            <div style={style}
                onMouseOver={(evt) => {
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                    setMouseOver(true);
                }}
                onMouseOut={(evt) => {
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                    setMouseOver(false);
                }}
                onClick={() => {
                    //取消选择该节点
                    dispatch({
                        type: UNSELECT_NODE
                    });

                }}
                onDoubleClick={(evt) => {
                    //setEdit(true);
                    //alert('弹出属性框input');
                    dispatch({
                        type: SELECT_NODE,
                        code: node.code
                    });
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                }}>
                <Input.Group compact>
                    {hiddeLabel ? "" : <Text style={{ height: height, lineHeight: height, width: `${labelWidth}%`, textAlign: 'right', paddingRight: '15px' }}>
                        {`${title}:`}
                    </Text>}
                    <Input
                         {...prefixAndSuffix}
                         type={type}
                        style={{ height: height, width: `${txtWidth}%` }}
                        placeholder={`请输入${title}`}
                    />
                    {required ? <Text style={{ height: height, lineHeight: height, width: `${requiredWidth}%`, textAlign: 'center', color: 'red' }}>
                        *</Text> : <></>}
                </Input.Group>
            </div>
        </WEditor></>

}

export default DRadioGroup;